<!DOCTYPE html>
<html>
<body>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="vue3-sfc-loader.js"></script>
  <script>

;(async () => {

  const { loadModule } = window['vue3-sfc-loader'];

  async function runComponent(source) {

    Vue.createApp(await loadModule('./myComponent.vue', { moduleCache: { vue: Vue }, getFile: (url) => Promise.resolve(url.includes('empty') ? '' : source), addStyle: () => {}, log(type, ...args) { console.log(...args) } })).mount(document.body);
  }

  /* <!-- */
  const tests = [

    async function noErrors() {
      await runComponent(`
        <template>
          Hello World !
        </template>
      `);
    },

    async function emptyBlocks() {
      await runComponent(`
        <template></template>
        <style></style>
        <script></script>
      `);
    },

    async function errorInTemplate() {
      await runComponent(`
        <template>
          Hello World ! {{ msg }
        </template>
      `);
    },

    async function errorInStyle() {
      await runComponent(`
        <template>
          Hello World !
        </template>
        <style>
        body
          color: red;
        }
        </style>
      `);
    },

    async function errorInScript() {
      await runComponent(`
        <script>
          test(
        </script>
      `);
    },

    async function allBlocks() {
      await runComponent(`
        <template>
          <b>Hello {{ msg }} !</b>
        </template>
        <style scoped>
          b { color: red; }
        </style>
        <script>
          export default {
            data: () => ({ msg: 'world' })
          }
        </script>
      `);
    },

    async function invalidRequire() {
      await runComponent(`
        <script>
          require('empty.mjs');
        </script>
      `);
    },

    async function invalidImport() {
      await runComponent(`
        <script>
          import 'empty.mjs';
        </script>
      `);
    },


    async function CSS_variable_injection() {
      await runComponent(`
        <template>
          <b>Hello</b>
        </template>
        <style scoped>
          b { color: v-bind('color'); }
        </style>
        <script>
          export default {
            data: () => ({ color: 'blue' })
          }
        </script>
      `);
    },


  ]

  console.log('start');

  for ( const test of tests ) {

    try {

      console.log('test:', test.name)
      await test();
    } catch(ex) {

      //console.log(ex)
    }
  }

  console.log('done');

})()
.catch(ex => console.error(ex))

  </script>
</body>
</html>